<template>
  <div >
       <el-form
        autocomplete="off"
        :model="loginForm"
        ref="loginForm"
        label-position="left"
      >
        
        <!-- <h2 class="login-title color-main">mall-admin-web</h2> -->
        <el-form-item prop="username">
          <el-input
            name="username"
            type="text"
            v-model="phone"
            autocomplete="on"
            placeholder="请输入手机号码"
          >
            <span slot="prefix">
              <i class="el-icon-phone"></i>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" v-if="isopen == 1">
          <el-input
            name="password"
            :type="pwdType"
            @keyup.enter.native="handleLogin"
            v-model="code"
            autocomplete="on"
            placeholder="请输入验证码"
          >
            <span slot="prefix">
              <i  class=""></i>
            </span>
            <span slot="suffix" >
              <i  class=""></i>
            </span>
          </el-input> 
        </el-form-item>

        <el-form-item style="margin-bottom: 60px" v-if="isopen==0">
          <el-button
            style="width: 100%"
            type="primary"
            :loading="loading"
            @click="getcode"
          >获取验证码</el-button>
        </el-form-item>
     

        <el-form-item style="margin-bottom: 60px" v-if="isopen==1">
          <el-button
            style="width: 100%"
            type="primary"
            :loading="loading"
            @click="Login"
          >登陆</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>
 
<script>
import { mapMutations } from 'vuex';
export default {

  name: "login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        phonenum:"",
        phonecode:""
      },
      loading: false,
      pwdType: "password",
      activeName:'first',
      isopen:0,
      phone:'',
      code:'',
    };
  },
  methods: {
     ...mapMutations(['changeLogin']),
    //手机端验证码
    getcode(){
      let phone = this.phone
      this.$axios.post("/ever-login/phonecode?phone="+phone
          )
          .then(res => {
            if(res.data.msg){
                this.isopen = 1
                alert("验证码已发送")
            }else{
              alert(res.data.msg)
            }
      })
    },
    //验证码校核  
     Login(){
       let code = this.code
      let phone = this.phone
      let self = this
      this.$axios.post("/ever-login/phoneLogin?phone="+phone+"&code="+code
          )
          .then(res => {
         if(res.data.msg){
            // 将用户result保存到vuex中
           self.changeLogin({ Authorization: true ,role:null});
           // 跳转
           this.$router.push({path:'/House'})
           }
         else{alert("验证码错误")}
      })
    },

  }
};
</script>
 
<style scoped>
</style>